<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Axios_Ajax</title>
</head>
<body>
<button>GET</button>
<button>POST</button>
<button>AJAX</button>
<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
<script>
    const btns = document.querySelectorAll("button");
    btns[0].onclick = function () {
        axios.get('http://localhost:8080/axios-demo1', {
            params: {
                id: 100,
                vip: 7
            },
            headers: {
                name: '张三',
                age: 10
            }
        }).then(value => {
            console.log(value)
        })
    }
    btns[1].onclick = function () {
        axios.post('http://localhost:8080/axios-demo2', {
            username: 'zhangsan',
            password: 'admin'
        }, {
            params: {
                id: 200,
                vip: 1
            },
            headers: {
                height: 180,
                weight: 180
            }
        });
    }
    btns[2].onclick = function () {
        axios({
            method: 'POST',
            url: 'http://localhost:8080/axios-demo2',
            //url参数
            params: {
                id: 2001,
                vip: 11
            },
            headers: {
                height: 181,
                weight: 181
            },
            //请求体
            data: {
                username: 'zhangsan1',
                password: 'admin1'
            }
        }).then(response=> {
            //状态码
            console.log(response.status);
            //响应状态字符串
            console.log(response.statusText);
            //响应头信息
            console.log(response.headers);
            //响应体
            console.log(response.data);
        })
    }
</script>
</body>
</html>